
import React, { Component } from 'react'
import PropTypes from 'prop-types'

function ChildCpn(props) {
    let { name, age } = props
    let { names } = props
        return(
            <div>
                <h2>子组件{name + age}</h2>
                <div>
                    <ul>
                        {
                            names.map((name, index) => {
                                return <li key={name}>{index + "" + name}</li>
                            })
                        }
                    </ul>
                </div>
            </div>
        )
}

ChildCpn.propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number,
    names: PropTypes.array
}

ChildCpn.defaultProps = {
    name: "小白",
    age: 20,
    names: ["突围"]
}

class SubCpn extends Component {
    static propTypes = {
        age: PropTypes.number
    }

    static defaultProps = {

    }

    render() {
        let { name, age } = this.props
        return (
            <h2>子组件{name + "" + age}</h2>
        )
    }
}

export default class App extends Component {
    render() {
        return (
            <div>
                <SubCpn name="崔小小" age={20} />
                <SubCpn name="陈可爱" age={18} />
                <ChildCpn name="啦啦" age={15} names={["天龙八部","射雕英雄传"]} />
            </div>
        )
    }
}
